<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :inline="true"
        label-width="77px"
        :model="where"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-form-item label="应用ID">
          <el-input :placeholder="'请输入游戏应用ID'" v-model="where.id"></el-input>
        </el-form-item>
        <el-form-item label="游戏名称:">
          <el-input :placeholder="'请输入游戏名称'" v-model="where.game_name"></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select clearable v-model="where.status" placeholder="请选择状态" class="ele-fluid">
            <el-option label="全部" value=""/>
            <el-option label="启用" value="1"/>
            <el-option label="禁用" value="2"/>
          </el-select>
        </el-form-item>

        <el-form-item class="ele-form-actions">
          <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="reload">查询
          </el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>

      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :where="where" :datasource="url" :columns="columns" :selection.sync="selection"
                     height="calc(100vh - 315px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit(null)"
                     v-if="permission.includes('sys:boxgame:add')">添加
          </el-button>
        </template>
        <template slot="type" slot-scope="{ row }">
          <el-tag :type="['success', 'primary', 'warning', 'info'][row.type - 1]" size="mini">
          </el-tag>
        </template>

        <template slot="cate_name" slot-scope="{ row }">
          <el-tag size="mini" v-for="(cate, index) in row.cate" :key="index"
                  :type="['success', 'primary', 'warning', 'info'][index - 1]">
            {{ cate.name }}
          </el-tag>
        </template>


        <template slot="tag_name" slot-scope="{ row }">
          <el-tag size="mini" v-for="(tag, index) in row.tag" :key="index"
                  :type="['success', 'primary', 'warning', 'info'][index - 1]">
            {{ tag.name }}
          </el-tag>
        </template>

        <template slot="games" slot-scope="{ row }">
          <el-link type="primary" :underline="false" @click="openGames(row)"
                   v-if="permission.includes('sys:boxgame:server')">区服详情
          </el-link>
        </template>


        <template slot="game_banner" slot-scope="{ row }">
          <div v-for="item in row.game_banner" :key="item.label" class="room_img">
            <video v-if="item.type === 'mp4'" :preview-src-list="[item.data]" controls
                   style="width: 40px; height: 40px;margin-left: 10px">
              <source :src="item.data" type="video/mp4"/>
            </video>

            <el-image v-else style="width: 30px; height: 30px;margin-left: 10px" :src="item.data"
                      :preview-src-list="[item.data]" fit="fit"></el-image>
          </div>
        </template>

        <template slot="avatar" slot-scope="{ row }">
          <el-image style="width: 30px; height: 30px" :src="row.icon" fit="fit"
                    :preview-src-list="[row.icon]"></el-image>
        </template>
        <template slot="action" slot-scope="{ row }">
          <el-dropdown>
            <el-button type="primary">
              更多操作<i class="el-icon-arrow-down"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-link type="primary" :underline="false" icon="el-icon-edit" @click="openEdit(row)"
                         v-if="permission.includes('sys:boxgame:edit')">编辑
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link type="primary" :underline="false" icon="el-icon-coordinate"
                         @click="startEdit(row)" v-if="permission.includes('sys:boxgamestart:edit')">启动参数
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link v-if="permission.includes('sys:boxgame:edit')" type="primary" :underline="false"
                         icon="el-icon-open"
                         @click="status(row)">{{
                    row.status === 1 ? "下架" : "上架"
                  }}
                </el-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <GameEdit :data="current" :visible.sync="showEdit" @done="reload"/>
    <GameStartEdit :data="current" :visible.sync="showStart" @done="reload"/>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import GameEdit from "./game-edit";
import GameStartEdit from "./game-start-edit";
// import GamesList from "./games";

// import GameBanner from "../gamebanner/index";
// import GameResourcePosition from "./resource-position/index";
// import GameResourcePositionEdit from "./resource-position/game-resource-position-edit";


export default {
  name: "BoxGame",
  components: {GameEdit, GameStartEdit},
  computed: {
    ...mapGetters(["permission"])
  },
  data() {
    return {
      // 表格数据接口
      url: "/boxGame/index",
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
          fixed: "left"
        },

        {
          prop: "id",
          label: "游戏应用id",
          width: 100,
          align: "center",
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: "game_name",
          label: "游戏名称",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },

        {
          columnKey: "avatar",
          prop: "icon",
          label: "游戏图标",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          slot: "avatar"
        },

        // {
        //   prop: "cate",
        //   label: "游戏类别",
        //   showOverflowTooltip: true,
        //   minWidth: 200,
        //   align: "center",
        //   slot: "cate_name"
        // },
        {
          prop: "content",
          label: "游戏描述",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center"
        },
        {
          prop: "status",
          label: "游戏状态",
          showOverflowTooltip: true,
          minWidth: 200,
          align: "center",
          formatter: (row, column, cellValue) => {
            if (cellValue == 1) {
              return "启用";
            } else if (cellValue == 2) {
              return "禁用";
            } else if (cellValue == 3) {
              return "待开服";
            }
          }
        },

        {
          prop: "version",
          label: "游戏版本",
          showOverflowTooltip: true,
          align: "center",
          minWidth: 200
        },
        {
          prop: "white",
          label: "白名单",
          showOverflowTooltip: true,
          align: "center",
          minWidth: 200
        },
        {
          prop: "desc",
          label: "备注",
          showOverflowTooltip: true,
          align: "center",
          minWidth: 200
        },

        {
          prop: "create_time",
          label: "创建时间",
          sortable: "custom",
          showOverflowTooltip: true,
          minWidth: 160,
          align: "center",
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          columnKey: "action",
          label: "操作",
          minWidth: 200,
          align: "center",
          resizable: false,
          slot: "action",
          fixed: "right"
        }
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 当前资源位编辑数据
      currentEdit: null,
      // 当前行id数据
      gameRowID: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示启动参数弹窗
      showStart: false,
      // 是否显示banner弹窗
      showBanner: false,
      showGames: false,
      // 是否显示计费点管理弹窗
      showEditGameChargePoint: false,
      gameStatus: {},
      //上架下架说明信息
      statusInfo: "",
      //资源管理是否显示
      showResource: false,
      //资源管理编辑
      showResourceEdit: false

    };
  },
  methods: {
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    startEdit(row) {
      this.current = row;
      this.showStart = true;
    },
    openBanner(row) {
      this.current = row;
      this.showBanner = true;
    },
    openGames(row) {
      this.current = row;
      this.showGames = true;
    },
    // 打开资源位
    openResource(row) {
      this.current = row;
      this.showResource = true;
    },
    // 打开资源位
    openResourceEdit(row) {
      this.current = row;
      this.showResourceEdit = true;
    },

    /* 显示编辑 */
    openEditGameChargePoint(row) {
      this.gameRowID = row.id;
      this.current = row;
      this.showEditGameChargePoint = true;
    },
    /* 编辑资源位弹窗 */
    gameResourcePositionEditRow(row) {
      console.log(row);
      this.currentEdit = row;
      this.showResourceEdit = true

    },
    gameResourcePositionOver() {
      this.$refs["gameResourcePosition"].reload();
    },

    status(row) {
      if (row.status === 1) {
        this.gameStatus = {status: 2, id: row.id};
        this.statusInfo = "确定要将此游戏下架吗?下架后需要重新上架";
      } else {
        this.gameStatus = {status: 1, id: row.id};
        this.statusInfo = "确定要将此游戏上架吗?";
      }
      this.loading = true;
      this.$confirm(this.statusInfo, "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/boxGame/status", this.gameStatus)
            .then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.$emit("done");
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },

    /* 删除 */
    remove(row) {
      const loading = this.$loading({lock: true});
      this.$http
        .post("/game/delete", {id: row.id})
        .then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的游戏吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          const loading = this.$loading({lock: true});
          this.$http
            .post("/game/delete", {id: this.selection.map(d => d.id)})
            .then(res => {
              loading.close();
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => {
        });
    }
  }
};
</script>

<style scoped></style>
